<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>聊天页面-信息列表</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <style>
        html,
        body {
            width: 100%;
            min-height: 100%;
            background: #f2efed;
            line-height: 1;
        }

        .verification_friend_box li {
            background-color: #fff;
            padding: 0.7rem;
            display: flex;
            align-items: center;
            margin-top: 0.45rem;
        }

        .verification_friend_box li .friend_img {
            width: 2.45rem;
            margin-right: 0.75rem;
            border: 0.5rem;
        }

        .verification_friend_box li .friend_name_id {
            line-height: 1.5;
        }

        .friend_name_id .friend_name {
            font-size: 0.8rem;
            font-weight: 600;
            color: #333;
        }

        .friend_name_id .friend_id {
            font-size: 0.6rem;
            color: #666;
        }

        .left_title,
        .right_cnt {
            font-size: 0.7rem;
            color: #333;
        }

        .left_title {
            flex: 1;
        }

        .right_cnt {
            flex: 2;
        }

        .right_icon {
            text-align: right;
        }
        /*发消息按钮*/

        .send_msg {
            width: 80%;
            margin: auto;
            margin-top: 1.5rem;
            text-align: center;
            color: #fff;
            background-color: #f23030;
            padding: 0.625rem;
            border-radius: 1rem;
            font-size: 0.8rem;
            font-weight: 600;
        }
        /*加入黑名单*/

        .add_blacklist {
            width: 80%;
            margin: auto;
            margin-top: 0.5rem;
            text-align: center;
            color: #333;
            background-color: #fff;
            padding: 0.625rem;
            border-radius: 1rem;
            font-size: 0.8rem;
            font-weight: 600;
        }
        /*对方发来的验证消息*/

        .target_msg {
            min-height: 3rem;
            padding: 0.7rem;
            font-size: 0.6rem;
            color: #999;
            background-color: #f4f4f4;
            position: relative;
        }

        .reply_btn {
            padding: 0.2rem 0.4rem;
            position: absolute;
            right: 0.5rem;
            bottom: 0;
            font-size: 0.6rem;
            color: #666;
        }
    </style>
</head>

<body>
    <div class="app">
        <ul class="verification_friend_box">
            <li>
                <img :src="not_friend_detial.head_img" alt="" class="friend_img">
                <div class="friend_name_id">
                    <div class="friend_name">{{not_friend_detial.username}}</div>
                    <div class="friend_id">创客号：{{not_friend_detial.maker_no}}</div>
                </div>
            </li>
            <!-- <li>
                <div class="left_title">备注</div>
                <div class="right_cnt"></div>
            </li> -->
            <!-- <div class="target_msg">
            你好，我是xxx
            <div class="reply_btn aui-border">回复</div>
        </div> -->
            <li>
                <div class="left_title">所在地区</div>
                <div class="right_cnt">{{not_friend_detial.address}}</div>
            </li>
            <!-- <li onclick="open_new_win('five','target_name','朋友动态','')">
            <div class="left_title">TA的动态</div>
            <div class="right_cnt right_icon">
                <span class="aui-iconfont aui-icon-right"></span>
            </div>
        </li> -->
        </ul>


        <div class="send_msg" @click="agree()">通过验证</div>
        <div class="add_blacklist">加入黑名单</div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../script/aui-dialog.js"></script>
<script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript">
    apiready = function() {
        // 获取好友详情
        var not_friend_data = new Vue({
            el: '.app',
            data: {
                not_friend_detial: {}
            },
            mounted: function() {
                var $_this = this;
                $_this.get_detail();
            },
            methods: {
                get_detail: function() {
                    var $_this = this;
                    api.ajax({
                        url: window.Url.Community_getUserDetails,
                        method: 'post',
                        data: {
                            values: {
                                token: $api.getStorage('user_data').token,
                                user_id: api.pageParam.target_id
                            }
                        }
                    }, function(ret, err) {
                        if (ret) {
                            console.log("非好友详细数据--" + JSON.stringify(ret));
                            if (ret.re == 1) {
                                $_this.not_friend_detial = ret.data;
                            }
                        } else {
                            alert(JSON.stringify(err));
                        }
                    });

                },
                // 同意添加好友的方法
                agree:function(){

                  var $_this = this;
                  api.ajax({
                    url: window.Url.Community_newFriendAgree,
                    method: 'post',
                    data: {
                      values:{
                        token:$api.getStorage('user_data').token,
                        friend_log_id:api.pageParam.agree_id
                      }
                    }
                  }, function(ret, err) {
                      if (ret) {
                          console.log(JSON.stringify(ret.info))
                          if(ret.re==1){
                            api.execScript({
                                name: 'four_two_header',
                                frameName: '',
                                script: 'window.location.reload();'
                            });
                            api.closeWin({});
                          }
                      } else {
                          api.alert({ msg: JSON.stringify(err) });
                      }
                  })
                }
            }
        })

    };



    //打开提示框
    var dialog = new auiDialog({});

    function open_diglog() {
        dialog.alert({
            title: "删除联系人",
            msg: '您确定要删除该联系人？',
            buttons: ['取消', '确定']
        }, function(ret) {
            if (ret) {
                api.execScript({
                    script: 'close_cover();'
                });

                if (ret.buttonIndex == 2) {
                    api.toast({
                        msg: '您点击了删除',
                        duration: 2000,
                        location: 'bottom'
                    });

                }
            }
        })
    }




    // 打开新的窗口
    // function open_new_win(index, title, type, img_src) {
    //
    //     api.openWin({
    //         name: 'four_' + index + '_header',
    //         url: 'four_headers/four_' + index + '_header.html',
    //         pageParam: {
    //             title: title,
    //             type: type,
    //             img_src: img_src
    //         }
    //     });
    // }
</script>

</html>
